<template>
  <div class="t-center">
    <div class="zz-pagination clear" :style="{padding: `${padding.join('px ')}px`}">
      <div class="left zz-pagination-left" v-if="!simple && isTotalItem">
        <p style="max-width: 140px">共计{{totalItem}}条记录，</p>
        <p style="max-width: 30px">每页</p>
        <zz-select
          class="left"
          style="margin: 0 5px; border-radius: 0; height: 25px; line-height: 25px"
          :border= true
          :options= "{width: '65px'}"
          :option="pagerList"
          :positionTop = true
          :name = pager
          @optionClick="pagerCallback">
        </zz-select>
        <p class="left">条</p>
      </div>
      <div class="left">
        <ul class="zz-page clear">
          <li class="btn-prev normal"  @click="select(currentPage - 1, 'prev')" :class="{disabled:currentPage == 1}" v-if="!simple">
            <a href="javascript:void(0);">
              <i class="iconfont icon-t-arrow"></i>
            </a>
          </li>

          <li @click="select(1), null, true" :class="{active: currentPage === 1, box: simple, normal: !simple  }">
            <a  href="javascript:void(0);">1</a>
          </li>

          <li v-if="isFirstEllipsis" class="liEllipsis">...</li>

          <li
            @click="select(i)"
            :class="{active: currentPage === i, box: simple, normal: !simple }"
            v-for="i in pageList">
            <a  href="javascript:void(0);">{{i}}</a>
          </li>

          <li v-if="isEllipsis" class="liEllipsis">...</li>
          <li @click="select(totalPage, null, true)" :class="{active: currentPage == totalPage, box: simple, normal: !simple  }" v-if="totalPage !== 1">
            <a href="javascript:void(0);">{{ totalPage}}</a>
          </li>

          <li class="btn-next normal" @click="select(currentPage + 1, 'next')" :class="{disabled:currentPage == totalPage}" v-if="!simple">
            <a  href="javascript:void(0);">
              <i class="iconfont icon-r-arrow"></i>
            </a>
          </li>
        </ul>

        <div v-if="goBtn && !simple" class="zz-select-page">
          <span>到</span>
          <input ref="input" class="zz-pagination-ipt" :value="currentPage" @input="watchInput">
          <span>页</span>
          <button class="zz-select-b" @click="select($refs.input.value)">跳转</button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'zz-paginate',
    props: {
      padding: {
        type: Array,
        default: function () {
          return [20, 20, 0, 20]
        }
      },
      pagingId: {
        type: String,
        default: 'paging'
      },
      simple: {
        type: Boolean,
        default: false
      },
      pageSize: {
        type: [Number, String],
        default: 10
      },
      goBtn: {
        type: Boolean,
        default: true
      },
      isTotalItem: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      getPaginate () {
        return this.$store.getters.getPaginate(this.pagingId)
      },
      totalPage () {
        return this.getPaginate[this.pagingId].totalPage
      },
      totalItem () {
        return this.getPaginate[this.pagingId].totalItem
      },
      currentPage () {
        return this.getPaginate[this.pagingId].currentPage
      },
      pager () {
        return `${this.getPaginate[this.pagingId].pageSize}`
      },
      pageList: function () {
        if (this.totalPage > 6) {
          this.isFirstEllipsis = true
          this.isEllipsis = true
          let items = []
          let max = this.currentPage + 4
          if (this.currentPage === 1) {
            this.isEllipsis = true
            this.isFirstEllipsis = false
            for (let i = this.currentPage; i < max; i++) {
              items.push(i + 1)
            }
            return items
          }
          if (this.currentPage === 2) {
            this.isEllipsis = true
            this.isFirstEllipsis = false
            for (let i = this.currentPage; i < max; i++) {
              items.push(i)
            }
            return items
          }
          if (this.currentPage === 3) {
            this.isFirstEllipsis = false
          }
          if (max === this.totalPage) {
            for (let i = this.currentPage; i < this.totalPage; i++) {
              items.push(i - 1)
            }
            return items
          } else if (max > this.totalPage) {
            this.isEllipsis = false
            let item = this.totalPage - 4
            for (let i = item; i < this.totalPage; i++) {
              items.push(i)
            }
            return items
          } else {
            this.isEllipsis = true
            for (let i = this.currentPage; i < max; i++) {
              items.push(i - 1)
            }
            return items
          }
        } else {
          this.isEllipsis = false
          this.isFirstEllipsis = false
          let items = []
          for (let i = 2; i < this.totalPage; i++) {
            items.push(i)
          }
          return items
        }
      }
    },
    data () {
      return {
        pagerList: {
          10: 10,
          20: 20,
          30: 30,
          50: 50,
          100: 100
        },
        first: 0,
        customPageSize: '',
        isEllipsis: false,
        isFirstEllipsis: false
      }
    },
    methods: {
      watchInput () {
        setTimeout(() => {
          if (isNaN(Number(this.$refs.input.value))) {
            this.$refs.input.value = this.currentPage
          }
        }, 500)
      },
      select (val, type, page) {
        if (val === 0) {
          return
        }
        if (this.currentPage === val) {
          return
        }
        if (val > this.totalPage) {
          return
        }
        if (this.totalPage === 1) {
          if (type === 'next') {
            if (this.currentPage + 1 === val) {
              return
            }
          }
          if (type === 'prev') {
            if (this.currentPage - 1 === val) {
              return
            }
          }
        }
        if (this.totalPage + 1 === val) {
          return
        }
        let pageSize = this.pageSize
        if (this.customPageSize) {
          pageSize = this.customPageSize
        }
        const obj = {
          currentPage: val,
          pageSize: pageSize
        }
        this.$store.commit('muQueryPaginate', obj)
        this.$emit('choose')
      },
      pagerCallback (data) {
        this.customPageSize = data.key
        const obj = {
          currentPage: 1,
          pageSize: this.customPageSize
        }
        this.$store.commit('muQueryPaginate', obj)
        this.$emit('choose')
      }
    }
  }

</script>

<style lang="scss" scoped>
  .zz-pagination {
    display: inline-block;
    position: relative;
    z-index: 6;
    .zz-pagination-left{
      margin-right: 40px;
      p{
        float: left;
        margin-top: 4px;
      }
    }
    .zz-page {
      display: inline-block;
      vertical-align: top;
      li{
        text-align: center;
        list-style: none;
        float: left;
        margin:0 5px;
      }
      .normal {
        min-width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        a {
          display: block;
          width: 100%;
          height: 100%;
          border: 1px $color-line solid;
          cursor: pointer;
          text-decoration: none;
          color: $color-font;
        }
      }
      .box{
        border: 1px $color-line solid;
        background: $color-bg;
        width: 25px;
        height: 25px;
        line-height: 25px;
        a{
          padding: 0 !important;
          cursor: pointer;
          text-decoration: none;
          color: $color-font;
        }
      }
      .liEllipsis{
        margin-top: 7px;
      }
      li:hover {
        a {
          color: $color;
        }
      }
      li.active {
        a {
          color: $color;
        }
      }
      li.disabled {
        a {
          color: #dddddd;
          cursor: not-allowed;
        }
      }
    }
    .btn-next,
    .btn-prev {
      font-size: 24px;
    }
    .zz-select-page {
      display: inline-block;
      vertical-align: top;
      span {
        font-size: 12px;
      }
      .zz-pagination-ipt {
        border: 1px $color-line solid;
        margin: 0 5px;
        height: 22px;
        width: 40px;
        line-height: 22px;
        text-align: center;
        font-size: 12px;
      }
      .zz-select-b{
        border: 1px $color-line solid;
        font-size: $font-size-smallest;
        background: none;
        height: 24px;
        cursor: pointer;
        margin-left: 5px;
      }
      .zz-pagination-ipt:focus{
        border-color: $color;
      }
      a {
        font-size: 12px;
        width: 34px;
        line-height: 19px;
        text-align: center;
        outline: none;
        border: 1px solid #ccd5db;
        background: #fff;
        display: block;
        margin-left: 5px;
        border-radius: 4px;
      }
      a:hover{
        background: $color;
        color: #fff;
        border-color: $color;
      }
    }
  }
</style>
